import type Uppy from '@uppy/core';
import { Plus } from 'lucide-react';
import { Button } from '../ui/Button';
import { useRef } from 'react';

export function UploadButton({ uppy }: { uppy: Uppy }) {
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <>
      <Button
        variant="outline"
        onClick={() => {
          if (inputRef.current) {
            inputRef.current.click();
          }
        }}
      >
        <Plus />
      </Button>
      <input
        type="file"
        onChange={(e) => {
          if (e.target.files) {
            Array.from(e.target.files).forEach((file) => {
              uppy.addFile({
                name: file.name,
                data: file,
              });
            });
            e.target.value = '';
          }
        }}
        multiple
        className="left-[-10000px] fixed"
        ref={inputRef}
      />
    </>
  );
}
